import { RepoLink } from 'libframe-docs/components/RepoLink'
import { ImportMeta } from 'libframe-docs/components/ImportMeta'

> **What is the Base URL?** Changing the Base URL (aka Public Base Path) is about changing the "URL pathname root" of our app.
> For example, instead of deploying our app to `https://example.org/*` (base: `/`) we can change the Base URL and deploy it to `https://example.org/some/base/url/*` (base: `/some/base/url/`).

To change the Base URL we:

1. Add the `base` config to both [`vite.config.js#base`](https://vitejs.dev/config/#base) and `createPageRenderer({ base })`. Example: <RepoLink path='/examples/base-url/vite.config.js' /> and <RepoLink path='/examples/base-url/server/server.js' />.

2. Use the <ImportMeta prop='env.BASE_URL' /> value [injected by Vite](https://vitejs.dev/guide/build.html#public-base-path) to construct a `<Link>` component that prepends the Base URL. Example: <RepoLink path='/examples/base-url/components/Link.jsx' />.

3. Use <ImportMeta prop='env.BASE_URL' /> when referencing static assets living in [`public/`](/static-directory#public). Example: <RepoLink path='/examples/base-url/renderer/_default.page.server.jsx' />.

Example:
 - <RepoLink path='/examples/base-url/' />


## CDN

If we want to deploy our static assets to a CDN while server-side rendering our pages on a separate sever, then we need to change the base URL only of our static assets but not the base URL of our SSR server.

We can use `createPageRenderer({ baseAssets: 'http://some-cdn.com/my-static-assets/' })` which will change the base URL only of our static assets.

Example:
 - <RepoLink path='/examples/base-url-cdn/' />


## See also

- [Vite Docs - Public Base Path](https://vitejs.dev/guide/build.html#public-base-path)
